<template>
    <div class="bottomNavigationStyle">
        <!-- 标题 -->
        <h2>{{ datas.text }}</h2>
        <!-- 提示 -->
        <p style="color: #969799; font-size: 12px; margin-top: 10px"> 拖动选中的导航可对其排序 </p>

        <!-- 图片导航 -->
        <div v-if="datas.imageList[0]">
            <vuedraggable v-model="datas.imageList" v-bind="dragOptions">
                <transition-group>
                    <section v-for="(item, index) in datas.imageList" :key="item + index" class="imgList">
                        <i class="el-icon-circle-close" @click="deleteimg(index)" />
                        <!-- 图片 -->
                        <div class="imag">
                            <img draggable="false" @click="showUpload('second', index)" :src="item.src"  alt="" />
                        </div>
                        <!-- 标题和链接 -->
                        <div class="imgText">
                            <el-input v-model="item.text" placeholder="请输入标题" size="mini" clearable />
                            <div style="height: 5px" />
                            <!-- 选择类型 -->
                            <select-link @selectThisLink="selectThisLink" @clearThisLink="clearThisLink(index)" :linktypeurl="item.url" :theIndex="index" />
                        </div>
                    </section>
                </transition-group>
            </vuedraggable>
        </div>

        <!-- 上传图片 -->
        <el-button class="uploadImg" type="primary" plain @click="showUpload('first')">
            <i class="el-icon-plus" />添加导航
        </el-button>

        <div class="bor" />
        <!-- 表单 -->
        <el-form label-width="80px" :model="datas" size="small" :rules="rules">
            <!-- 文字大小 -->
            <el-form-item label="文字大小" prop="textSize" :hide-required-asterisk="true" class="lef">
                <el-input v-model.number="datas.textSize" type="number" placeholder="请输入文字大小" :maxlength="2" />
            </el-form-item>

            <div style="height: 10px" />

            <!-- 图片圆角 -->
            <el-form-item label="图片圆角" class="lef borrediu">
                <el-slider v-model="datas.borderRadius" :max="50" input-size="mini" show-input />
            </el-form-item>
        </el-form>

        <!-- 上传图片 -->
        <uploadimg ref="upload" @uploadInformation="uploadInformation" />
    </div>
</template>
<script>
import uploadimg from "../../../uploadImg"; // 图片上传
import vuedraggable from "vuedraggable"; // 拖拽组件
import SelectLink from "../../../selectLink";
export default {
    name: "BottomNavigationStyle",
    components: { 
        uploadimg, 
        vuedraggable, 
        SelectLink 
    },
    props: {
        datas: Object,
    },
    data() {
        const textSize = (rule, value, callback) => {
            if (value.length === 0) callback(new Error("请输入有效数字"));
            if (value > 40) {
                callback(new Error("数字不能超过40"));
                this.datas.textSize = '12';
            } else {
                this.datas.textSize = value;
            }
        };
        return {
            dragOptions: {
                // 拖拽配置
                animation: 200,
            },
            rules: {
                textSize: [{ required: true, validator: textSize, trigger: "blur" }]
            },
            emptyText: "",
            changeType: "",
            changeIndex: ""
        }
    },
    methods: {
        showUpload(type, index) {
            this.changeType = type;
            this.changeIndex = index;
            this.$refs.upload.showUpload();
        },
        // 提交
        uploadInformation(res) {
            if (this.changeType == "first") {
                this.datas.imageList.push({
                    src: res,
                    text: "",
                    id: "",
                });
            } else {
                this.datas.imageList[this.changeIndex].src = res;
            }
        },
        // 选择链接
        selectThisLink(resu) {
            this.datas.imageList.forEach((it, ind) => {
                if (ind == resu.index) {
                    it.url = resu.url;
                    it.linktype = resu.linktype;
                    it.id = resu.id;
                    it.text = resu.name;
                    if(resu.note != undefined){
                        it.desc = resu.note;
                    }
                }
            });
        },
        clearThisLink (index) {
            this.datas.imageList[index].url = '';
        },
        /* 删除图片列表的图片 */
        deleteimg(index) {
            this.datas.imageList.splice(index, 1);
        },
    },
}
</script>
<style lang="scss" scoped>
.bottomNavigationStyle{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 10px 20px;
    box-sizing: border-box;
    .bor {
        height: 1px;
        margin: 20px 0;
        background-color: #ebedf0;
    }
    /* 标题 */
    h2 {
        padding: 24px 16px 24px 0;
        margin-bottom: 15px;
        border-bottom: 1px solid #f2f4f6;
        font-size: 18px;
        font-weight: 600;
        color: #323233;
    }

    .lef {
        .el-form-item__label {
            text-align: left;
        }
    }

    /* 上传图片按钮 */
    .uploadImg {
        width: 145px;
        height: 40px;
        margin-top: 10px;
    }
    .imgList {
    padding: 6px 12px;
    margin: 16px 7px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
    display: flex;
    position: relative;

    /* 删除图标 */
    .el-icon-circle-close {
      position: absolute;
      right: -10px;
      top: -10px;
      cursor: pointer;
      font-size: 19px;
    }

    /* 图片 */
    .imag {
      width: 60px;
      height: 60px;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        display: inline-block;
      }
      span {
        background: rgba(0, 0, 0, 0.5);
        font-size: 12px;
        position: absolute;
        left: 0px;
        bottom: 0px;
        display: inline-block;
        width: 100%;
        text-align: center;
        color: #fff;
        height: 20px;
        line-height: 20px;
      }
    }

    /* 图片字 */
    .imgText {
      width: 80%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding-left: 20px;
      justify-content: space-between;
      .select-type {
        display: flex;
        .el-select {
          .el-input {
            input {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>